<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学生管理系统</title>
		<link rel="stylesheet" href="bootstrap.min.css">
		<style>
			*{margin: 0;padding: 0;}
			h2{
				font-size: 20px;
				margin-left: 20px;
				color: #0099CC;
			}
			.warp{
				position: relative;
			}
			.hide{
				display: none;
			}
			.btn-success{
				float: right;
				margin-right: 50px;
				margin-bottom: 20px;
			}
			.mask{
				width: 100%;
				height: 90%;
				background: rgb(0,0,0,0.5);
				position: fixed;
				top: 10%;
				left: 0;
				display: none;
			}
			.show{
				display: block;
			}
			.pop{
				width: 500px;
				padding: 20px 50px;
				background: white;
				transform: translate(-50%,-50%);
				border-radius: 10px;
				position: absolute;
				top: 50%;
				left: 50%;
				display: none;
			}
			.close{
				font-size: 20px;
				position: absolute;
				right: 10px;
				top: 10px;
			}
		</style>
	</head>
	<body>
		<div class="warp ">
			<h2>学生管理系统</h2>
			<button class="btn btn-success">新增学生</button>
			<table class="table table-bordered">
			 <tr>
				 <th>学号</th>
				 <th>姓名</th>
				 <th>年龄</th>
				 <th>性别</th>
				 <th>城市</th>
				 <th>入学时间</th>
				 <th>操作</th>
			 </tr>
			 <tbody>
				 <tr class="template hide">
					 <td class="data-id">1</td>
					 <td class="data-name">华晨宇</td>
					 <td class="data-age">18</td>
					 <td class="data-sex">男</td>
					 <td class="data-city">武汉</td>
					 <td class="data-time">2028-2-3</td>
					 <td>
						 <button type="button" class="btn btn-info edit">编辑</button>
						 <button type="button" class="btn btn-danger delete">删除</button>
					 </td>
				 </tr>
			 </tbody>
			</table>
			<div class="mask ">
				<div class="pop ">
					<span class="close"> × </span>
					<div class="form-horizontal">
						<div class="form-group">
							<label for="rename" class="col-sm-2 control-label">姓名</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="rename" placeholder="学生姓名">
							</div>
						</div>
					
						<div class="form-group">
							<label for="reage" class="col-sm-2 control-label">年龄</label>
							<div class="col-sm-10">
								<input type="number" class="form-control" id="reage" placeholder="年龄">
							</div>
						</div>
					
						<div class="form-group">
							<label for="resex" class="col-sm-2 control-label">性别</label>
							<label class="radio-inline">
								<input type="radio" name="sex" checked>男
							</label>
							<label class="radio-inline">
								<input type="radio" name="sex" id="female">女
							</label>
						</div>
					
						<div class="form-group">
							<label class="col-sm-2 control-label">城市</label>
							<select name="" id="province"></select>
							<select name="" id="city"></select>
							<select name="" id="area"></select>
						</div>
						
						
						<div class="form-group">
							<label class="col-sm-2 control-label">入学日期</label>
							<div class="col-sm-10">
								<input type="input" class="form-control" id="retime" placeholder="入学日期">
							</div>
						</div>
						
						<div class="form-group" style="float:right;margin-top:20px;">
							<button id="submit" class="btn btn-primary">确认添加</button>
							<button id="cancel" class="btn btn-default">取消</button>
						</div>
					</div>
			</div>
		</div>
		<script src="jquery.min.js"></script>
		<script type="text/javascript" src="city.js">
			
		</script>
		<script>
		
			let address = "http://127.0.0.1:81"
			let template = $(".template")
			let tbody = $("tbody")
			//把数据库里的数据通过克隆放到页面上
			$.ajax({
				url:`${address}/student`,
				success(data){
					
					
					data.forEach(item=>{
						let copy = template.clone(true)
						copy.attr("class","template")
						copy.find(".data-id").html(item.id)
						copy.find(".data-name").html(item.name)
						copy.find(".data-age").html(item.age)
						copy.find(".data-sex").html(item.sex ? "男" : "女")
						copy.find(".data-city").html(item.city)
						copy.find(".data-time").html(item.time)
						copy.appendTo(tbody)
					})
					
				}
			})
		
			//删除操作
			$(".delete").click(function(){
				let news = $(this).closest("tr")
				if(confirm(`确定要删除${$(this).closest("tr").find(".data-name").html()}这个学生吗，这个操作不可逆`)){
					$(this).closest("tr").remove()
					$.ajax({
						url:`${address}/deletestudent`,
						data:{
							id:news.find(".data-id").html()
						},
						success(data){
							console.log("棒棒哒")
						}
					})
				}
			})
			
			//添加学生
			//点击增加学生按钮
		$(".btn-success").click(function(){
			$(".mask").addClass("show")
			$(".pop").addClass("show")
		})	
		//点击取消学生按钮
		$(".btn-default").click(function(){
			$(".mask").removeClass("show")
			$(".pop").removeClass("show")
		})
		//点击×号学生按钮
		$(".close").click(function(){
			$(".mask").removeClass("show")
			$(".pop").removeClass("show")
	    })	
		 
		 //初始化省市县的下拉菜单
		 //省
		 let province = $("#province")
		 let city = $("#city")
		 let area = $("#area")
		 
		 citys.forEach(item=>{
			 let option = $(`<option>${item.provinceName}</option>`)
			 option.appendTo(province)
		 })
		 //当市变化时市发生变化
		 
		 province.change(function(){
			 city.html("")
			 area.html("")
			  citylist = citys[this.selectedIndex].mallCityList
			citylist.forEach(item=>{
				
				let option = $(`<option>${item.cityName}</option>`)
				option.appendTo(city)
			})
			//区
			let b = citylist[0].mallAreaList
			b.forEach(item=>{
					 console.log(item)
				let option = $(`<option>${item.areaName}</option>`)
					option.appendTo(area) 
			})
		 })
		 
		 //区发送变化
		 
		  city.change(function(){
			  area.html("")
			 let arealist = citylist[this.selectedIndex].mallAreaList
			 arealist.forEach(item=>{
				 console.log(item)
				let option = $(`<option>${item.areaName}</option>`)
				option.appendTo(area) 
			 })
		  })
		  
		  //确认添加
		  $(".btn-primary").click(function(){
			  $.ajax({
				  url:`${adress}/joinstudent`,
				  data:{
					 name:$("#rename").val(),
					 age:$("#reage").val(),
					 sex:$("#female")[0].checked ? 0 : 1,
					 city:province.val() + city.val() + area.val(),
					 time:$("#retime").val()
				  },
				  success(data){
					  if(data === "success"){
						 history.go(0)
					  }
					  else{
						  alert("添加失败")
					  }
				  }
			  })
		  })
		  
		  $("#retime").click(function(){
		    WdatePicker();
		  })
		</script>
	</body>
</html>
